<!--
 * @Author: 秦少卫
 * @Date: 2022-09-03 19:16:55
 * @LastEditors: 秦少卫
 * @LastEditTime: 2024-10-07 17:39:38
 * @Description: 多元素或单元素对齐方式
-->

<template>
  <div v-if="isSelect" class="attr-item-box">
    <Dropdown placement="left-start">
      <div class="bar-btn">
        <centerIcon />
      </div>
      <template #list>
        <DropdownMenu @click="handleMenuClick">
          <DropdownItem name="centerX">{{ $t('attrSeting.centerAlign.centerX') }}</DropdownItem>
          <DropdownItem name="center">{{ $t('attrSeting.centerAlign.center') }}</DropdownItem>
          <DropdownItem name="centerY">{{ $t('attrSeting.centerAlign.centerY') }}</DropdownItem>
        </DropdownMenu>
      </template>
    </Dropdown>
    <!-- <div class="bg-item"> -->
    <!-- 水平集中 -->
    <!-- <Tooltip :content="$t('attrSeting.centerAlign.centerX')">
        <Button long @click="position('centerH')" type="text">
          <centerX width="14" height="14"></centerX>
        </Button>
      </Tooltip> -->
    <!-- 水平垂直居中 -->
    <!-- <Tooltip :content="$t('attrSeting.centerAlign.center')">
        <Button long @click="position('center')" type="text">
          <centerIcon width="14" height="14"></centerIcon>
        </Button>
      </Tooltip> -->
    <!-- 垂直居中 -->
    <!-- <Tooltip :content="$t('attrSeting.centerAlign.centerY')">
        <Button long @click="position('centerV')" type="text">
          <centerY width="14" height="14"></centerY>
        </Button>
      </Tooltip> -->
    <!-- </div> -->
    <!-- <Divider plain></Divider> -->
  </div>
</template>

<script setup name="CenterAlign">
import useSelect from '@/hooks/select';
import centerIcon from '@/assets/icon/centerAlign/center.svg';
// import centerX from '@/assets/icon/centerAlign/centerX.svg';
// import centerY from '@/assets/icon/centerAlign/centerY.svg';

const { isSelect, canvasEditor } = useSelect();

const handleMenuClick = (name) => {
  console.log(name);

  switch (name) {
    case 'centerX':
      position('centerH');
      break;
    case 'center':
      position('center');
      break;
    case 'centerY':
      position('centerV');
      break;
  }
};

const position = (name) => {
  canvasEditor.position(name);
};
</script>
<style scoped lang="less">
svg {
  vertical-align: text-bottom;
}
</style>
